layui.define(['jquery', 'layer'], function (exports) {
    var $ = layui.$;
    var layer = layui.layer;

    //常量
    var MOD_NAME = "layuiDrawer";

    //函数
    var styleInject = function (css, elem) {
        if (!css || typeof document === 'undefined') {
            return;
        }

        var head = elem ? elem : document.getElementsByTagName('head')[0];
        var style = document.createElement('style');
        style.type = 'text/css';

        if (head.firstChild) {
            head.insertBefore(style, head.firstChild);
        } else {
            head.appendChild(style);
        }

        if (style.styleSheet) {
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }
    };

    var css = '.layui-layer.layui-layer-drawer{bottom:0px;top:0px;border:none!important;box-shadow:1px 1px 50px rgba(0,0,0,.3)!important;overflow:auto}.layui-layer.layui-layer-drawer>.layui-layer-content,.layui-layer .layui-layer-drawer>.layui-layer-content>iframe{height:100%!important}.layui-layer.layui-layer-drawer>.layui-layer-title+.layui-layer-content{top:0px;left:0;right:0;bottom:0;height:auto!important}.layui-anim-rl{-webkit-animation-name:layui-rl;animation-name:layui-rl}@-webkit-keyframes layui-rl{from{-webkit-transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes layui-rl{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}.layui-anim-lr{-webkit-animation-name:layui-lr;animation-name:layui-lr}@-webkit-keyframes layui-lr{from{-webkit-transform:translate3d(-300px,0,0);opacity:1}to{-webkit-transform:translate3d(0,0,0);opacity:1}}@keyframes layui-lr{from{transform:translate3d(-300px,0,0)}to{transform:translate3d(0,0,0)}}.layui-anim-down{-webkit-animation-name:layui-down;animation-name:layui-down}@-webkit-keyframes layui-down{from{-webkit-transform:translate3d(0,-300px,0);opacity:.3}to{-webkit-transform:translate3d(0,0,0);opacity:1}}@keyframes layui-down{from{transform:translate3d(0,-300px,0);opacity:.3}to{transform:translate3d(0,0,0);opacity:1}}';

    styleInject(css);

    //外部接口
    var Class = function (options) {
        var that = this;
        that.config = $.extend({}, that.config, options);
    };

    //默认配置
    Class.prototype.config = {
        title: '标题',
        content: '空',
        offset: 'r',
        width: '300px',
        height: '300px',
        top: 0,
        bottom: 0,
    };

    //渲染视图
    Class.prototype.render = function () {
        var that = this
            , options = that.config;

        switch (options.offset) {
            case 'r':
                options.skin = 'layui-anim layui-anim-rl layui-layer-drawer';
                if (!options.area) {
                    options.area = options.width ? [options.width, '100%'] : ['300px', '100%'];
                }
                break;
            case 'l':
                options.skin = 'layui-anim layui-anim-lr layui-layer-drawer';
                if (!options.area) {
                    options.area = options.width ? [options.width, '100%'] : ['300px', '100%'];
                }
                break;
            case 't':
                options.skin = 'layui-anim layui-anim-down';
                if (!options.area) {
                    options.area = options.height ? ['100%', options.height] : ['100%', '300px'];
                }
                break;
            case 'b':
                options.skin = 'layui-anim layui-anim-up';
                if (!options.area) {
                    options.area = options.height ? ['100%', options.height] : ['100%', '300px'];
                }
                break;
        }

        var success = options.success;
        options.success = function (layero, index) {
            options.top = options.top ? parseInt(options.top) : 0;
            options.bottom = options.bottom ? parseInt(options.bottom) : 0;
            options.left = options.left ? parseInt(options.left) : 0;
            options.right = options.right ? parseInt(options.right) : 0;

            var layerWidth = $(layero).outerWidth();
            var layerHeight = $(layero).outerHeight();
            var windowWidth = $(window).outerWidth();
            var windowHeight = $(window).outerHeight();
            var config = {};

            switch (options.offset) {
                case 'r':
                    config = {
                        left: windowWidth - layerWidth - options.right,
                        top: options.top,
                        bottom: options.bottom,
                        height: layerHeight - options.top - options.bottom
                    };
                    break;
                case 'l':
                    config = {
                        left: options.left,
                        top: options.top,
                        bottom: options.bottom,
                        height: layerHeight - options.top - options.bottom
                    };
                    break;
                case 't':
                    config = {
                        top: options.top,
                        left: options.left,
                        right: options.right,
                        width: layerWidth - options.left - options.right
                    };
                    break;
                case 'b':
                    config = {
                        top: windowHeight - layerHeight - options.bottom,
                        left: options.left,
                        right: options.right,
                        width: layerWidth - options.left - options.right
                    };
                    break;
            }

            $(layero).css(config);

            success && success(layero, index);
        };

        var end = options.end;
        options.end = function () {
            layer.closeAll("page");
            end && end();
        };

        layer.open($.extend({
            type: 1,
            id: 'layer-drawer',
            anim: -1,
            offset: 'r',
            content: '',
            shade: 0.6,
            shadeClose: true,
            isOutAnim: false,
            resize: false,
            move: false,
        }, options));
    };

    //实例
    var drawer = {
        //渲染操作视图
        render: function (options) {
            var that = new Class(options);
            that.render();
            return that;
        }
    };

    exports(MOD_NAME, drawer);
});